<template>
  <div class="home-content">
    <div class="detailBox1">
      <div v-for="item in detailList1" class="detailBox1-item">
        <div class="detailBox1-item-text">
          <div class="detailBox1-item-title">{{ item.title }}</div>
          <div class="detailBox1-item-detail">{{ item.detail }}</div>
        </div>
        <div class="detailBox1-item-img">
          <img src="@/assets/images/douya.png" class="douya" :ref="setRefAction">
          <img :src="item.imgUrl">
        </div>
      </div>
    </div>
    <div class="bg-linear">
      <div class="detailBox2">
        <div v-for="item in detailList2" class="detailBox2-item">
          <img :src="item.imgUrl">
          <div class="detailBox2-item-title">{{ item.title }}</div>
          <div class="detailBox2-item-detail">{{ item.detail }}</div>
        </div>
      </div>
    </div>
    <div class="detailBox3">
      <div v-for="(item, index) in detailList3" class="detailBox3-item">
        <div class="detailBox3-item-index">0{{ index + 1 }}</div>
        <div class="detailBox3-item-text">
          <div class="detailBox3-item-title">{{ item.title }}</div>
          <div class="detailBox3-item-detail">{{ item.detail }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import circle1 from '@/assets/images/circle3.png'
import circle2 from '@/assets/images/circle2.png'
import circle3 from '@/assets/images/circle3.png'
import plant from '@/assets/images/plant.png'
import bitcoin from '@/assets/images/bitcoin.png'
import lever from '@/assets/images/lever.png'
import { isMobileDevice } from '@/utils/util'
import { onMounted, onUnmounted, ref } from 'vue'

const detailList1 = [
  {
    title: 'COMPACT DESIGN',
    detail: 'Fits in just 0.2㎡, perfect for any home spaces.',
    imgUrl: circle1,
  },
  {
    title: 'EFFORTLESS MAINTENANCE',
    detail: 'Just 5 minutes a week, effortless maintenance.',
    imgUrl: circle2,
  },
  {
    title: 'BEGGINER FRIENDLY',
    detail: 'No experience needed. The device handles it all for you.',
    imgUrl: circle3,
  },
]

const detailList2 = [
  {
    title: 'FUN',
    detail: 'make planting an exciting part of your life.',
    imgUrl: plant,
  },
  {
    title: 'AFFORDABLE',
    detail: 'Save at least 60% by growing at home.',
    imgUrl: bitcoin,
  },
  {
    title: 'LEGAL',
    detail: 'Legal in 37 U.S. states, with personal growing allowed',
    imgUrl: lever,
  },
]
const detailList3 = [
  {
    title: 'DATA-DRIVEN ECONOMY',
    detail: 'Turn data into value.',
  },
  {
    title: 'DECENTRALIZED GOVERNANCE',
    detail: 'Grow to Earn, fair and transparent governance.',
  },
]

const douyaList: HTMLImageElement[] = []
const setRefAction = (el: HTMLImageElement) => {
  douyaList.push(el)
  return ref<HTMLImageElement | null>(el)
}
let observer: IntersectionObserver;
onMounted(() => {
  if (isMobileDevice()) {
    const handleIntersect = (
      entries: IntersectionObserverEntry[]
    ) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          entry.target.classList.add('is-visible');
        } else {
          entry.target.classList.remove('is-visible');
        }
      });
    };
    observer = new IntersectionObserver(handleIntersect);
    douyaList.forEach((element) => {
      observer.observe(element);
    });
  }
})
onUnmounted(() => {
  if (isMobileDevice()) {
    douyaList.forEach((element) => {
      observer.unobserve(element);
    });
  }
})
</script>
<style scoped lang="scss">
.home-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  // gap: 200px;
  margin: 0 auto;
  color: #fff;

  .detailBox1 {
    width: 1096px;
    display: flex;
    gap: 12px;
    padding-bottom: 100px;

    @media screen and (max-width: 728px) {
      width: 100vw;
      flex-direction: column;
      padding-left: 24px;
      padding-right: 24px;
      padding-bottom: 0;
    }

    .detailBox1-item {
      position: relative;
      width: 352px;
      // padding: 0 32px;
      flex: 1;
      align-items: center;
      justify-content: center;

      @media screen and (max-width:726px) {
        width: calc(100vw - 48px);
        margin-bottom: 84px;
      }

      .detailBox1-item-text {
        padding: 0 32px;
      }

      .detailBox1-item-text::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        display: inline-block;
        width: 2px;
        height: 46px;
        background-color: #9ACB5A;
        opacity: 0.6;

      }

      &-title {
        opacity: 0.7;
        font-weight: 700;
        font-size: 32px;
        line-height: 39px;
        word-spacing: 100px;
        white-space: 30px;

        @media screen and (max-width: 728px) {
          font-size: 28px;
          line-height: 34px;
        }
      }

      &-detail {
        opacity: 0.7;
        font-weight: 400;
        font-size: 16px;
        line-height: 20px;
        width: 265px;
        margin-top: 12px;
        margin-bottom: 46px;
      }

      &-img {
        position: relative;
        display: flex;
        justify-content: center;

        img {
          width: 288px;
          height: 240px;
        }

        .douya {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          transition: all 0.6s;
          width: 0;
          height: 0;
        }
      }


      @media screen and (max-width:726px) {
        img {
          width: 180px;
          height: auto;
        }
      }
    }



    .detailBox1-item:hover {

      .detailBox1-item-detail,
      .detailBox1-item-title {
        transition: all 0.6s;
        opacity: 1;
      }

      .douya {
        width: 130px;
        height: 130px;
      }
    }

    @media screen and (max-width:726px) {
      .douya.is-visible {
        transition: all 0.6s;
        width: 95px;
        height: 95px;
      }
    }
  }

  .bg-linear {
    width: 100vw;
    background: linear-gradient(45deg, #031E0B 0, #031E0B 200px, #031E0B00 500px, transparent),
      linear-gradient(-45deg, #031E0B 0, #031E0B00 500px, transparent);

    @media screen and (max-width:726px) {
      background: none;
    }
  }

  .detailBox2 {
    margin: 0 auto;
    width: 1096px;
    display: flex;
    gap: 12px;
    padding-left: $base-home-margin;
    padding-right: $base-home-margin;
    padding-top: 100px;
    padding-bottom: 130px;

    @media screen and (max-width: 728px) {
      width: 100vw;
      flex-direction: column;
      padding-left: 24px;
      padding-right: 24px;
      padding-top: 20px;
      padding-bottom: 0;
      gap: 48px;
    }

    .detailBox2-item {
      flex: 1;
      border: 2px solid #fff4;
      border-radius: 12px;
      padding: 32px;
      background: url('@/assets/images/matrix.png') no-repeat, #031E0B;
      background-position: 80% 20%;

      img {
        width: 80px;
        height: 80px;
      }

      &-title {
        font-weight: 700;
        font-size: 32px;
        line-height: 46px;
        margin-top: 120px;
      }

      &-detail {
        font-size: 16px;
        line-height: 20px;
      }
    }

    .detailBox2-item:hover {
      transition: all 0.6s;
      border: 2px solid #69873B;
      box-shadow: 2px 0px 3px 0px #69873bac;
    }
  }

  .detailBox3 {
    display: flex;
    flex-direction: column;
    gap: 70px;
    padding-top: 170px;
    padding-bottom: 200px;
    margin-left: 90px;
    background: linear-gradient(45deg, #031E0B 0, #031E0B 200px, #031E0B00 900px, transparent);


    @media screen and (max-width: 728px) {
      // width: calc(100vw - 48px);
      width: 100vw;
      padding: 120px 24px 140px;
      margin-left: 0;
    }

    .detailBox3-item {
      flex: 1;
      padding: 0 48px;
      align-items: center;
      justify-content: center;
      display: flex;
      gap: 80px;

      @media screen and (max-width: 728px) {
        flex-direction: column;
        align-items: start;
        padding-left: 12px;
        padding-right: 12px;
        gap: 24px;
      }

      &-index {
        font-family: sans-serif;
        font-weight: 700;
        font-size: 120px;
        background: linear-gradient(to bottom, #F5FF64CC 0, #9ACB5ACC 100%);
        background-clip: text;
        color: transparent;

        @media screen and (max-width: 728px) {
          font-size: 80px;
        }
      }

      &-text {
        width: 390px;
        position: relative;
        padding-left: 24px;

        @media screen and (max-width: 728px) {
          width: 307px;
        }
      }

      &-text::before {
        content: '';
        position: absolute;
        left: 0;
        top: 12px;
        display: inline-block;
        width: 2px;
        height: 80%;
        background-color: #9ACB5A;
        opacity: 0.6;

        @media screen and (max-width: 728px) {
          top: 8px;
          height: 90%;
        }
      }

      &-title {
        font-weight: 700;
        font-size: 36px;
        line-height: 44px;

        @media screen and (max-width:726px) {
          font-size: 24px;
          line-height: 29px;
          margin-bottom: 8px;
        }
      }

      &-detail {
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;

        @media screen and (max-width:726px) {
          line-height: 19px;
        }
      }
    }
  }
}
</style>
